<!--suppress HtmlUnknownTarget -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <title>Mandomedia Show</title>

    <link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css"/>
</head>
<body class="bg-light col-sm-8 mx-auto col-lg-4">

<ul class="nav justify-content-end bg-white shadow-sm">
    <li class="nav-item">
        <a class="nav-link" href="/add">Add</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="/show">Show</a>
    </li>
</ul>

<main class="row row-cols-1 bg-white rounded-3 mt-5 shadow p-3 mx-3">
    <section class="col">
        <table class="table">
            <thead>
            <tr>
                <th scope="col">Employee</th>
                <th scope="col">DUI</th>
                <th scope="col">Salary</th>
                <th scope="col">Active</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

        <div id="man-actions-rows" class="btn-group pt-3 col-6 float-end d-none">
            <button type="button" class="btn btn-danger">Delete</button>
            <button type="button" class="btn border">Edit</button>
        </div>

    </section>

    <section class="col mt-5 mx-0 px-0">
        <div class="row mx-auto">
            <form class="col-9">
                <label class="input-group">
                    <input type="text" class="form-control" placeholder="Employee ...">
                    <button type="submit" class="btn btn-primary">Search</button>
                </label>
            </form>

            <button class="col-3 btn bg-white border" onclick="window.location.href = '/add'">Add</button>
        </div>
    </section>
</main>
<script src="../js/bootstrap/bootstrap.bundle.min.js"></script>
<script type="module">

    function selectElementTable() {
        // The 'this' keyword reference the current 'tr' element selected for
        // the user in the DOM.

        // Deleted the state active of select element (if exist, see the operator ?).
        document.querySelector('.table-active')?.classList.remove('table-active');
        // Show the actions available for the current 'tr' element.
        document.getElementById('man-actions-rows').classList.remove('d-none');

        // Select the current element.
        this.classList.add('table-active');
    }

    /**
     * The requirements not specified the use of active property.
     */
    function getGenericSwitch() {
        const divElement = document.createElement('div');
        divElement.classList.add('form-check', 'form-switch', 'ms-1');

        const inputElement = document.createElement('input');
        inputElement.type = "checkbox";
        inputElement.checked = true;
        inputElement.classList.add('form-check-input');

        divElement.appendChild(inputElement);
        return divElement;
    }

    /**
     * Return a arrays of object with the follow properties.
     *
     * @returns {Promise<Array.<{dui:number, nit:number, name:string, department:string, salary:number, marital-status:string}>>}
     */
    async function getAllEmployee() {
        const response = await fetch('/employee/all');
        return JSON.parse(await response.text());
    }

    getAllEmployee().then(employees => {
        const bodyTable = document.querySelector('tbody');

        for (const employee of employees) {
            const nameElement = document.createElement('td');
            nameElement.innerHTML = employee.name;

            const duiElement = document.createElement('td');
            duiElement.innerHTML = employee.dui;

            const salaryElement = document.createElement('td');
            salaryElement.innerHTML = employee.salary;

            const activeElement = document.createElement('td');
            activeElement.appendChild(getGenericSwitch());

            const row = document.createElement('tr');
            // Each tr element can be selected for the user.
            // With this mechanism is simple get the value of current tr when
            // the user to make click in the element.
            row.addEventListener('click', selectElementTable);
            row.appendChild(nameElement);
            row.appendChild(duiElement);
            row.appendChild(salaryElement);
            row.appendChild(activeElement);

            bodyTable.appendChild(row);
        }
    });
</script>
</body>
</html>